<!--
 * @Author: your name
 * @Date: 2021-08-05 09:54:15
 * @LastEditTime: 2021-08-05 10:51:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuestudy\vue\15-组件\数量加减组件.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
    <title>购物车</title>
  </head>
  <style>
    #shoppingCart {
      width: 800px;
      margin: 10px;
      padding: 10px;
      border: 1px solid #eeeeee;
    }

    #shoppingCart ul {
      padding: 5px 0;
    }

    li {
      width: 100px;
      /*border: 1px solid #99a9bf;*/
      text-align: center;
    }

    ul li:nth-child(2) {
      flex: 1;
    }

    .jian,
    .jia,
    input {
      width: 20px;
    }

    .count {
      width: 30px;
      text-align: center;
    }

    .total {
      text-align: right;
    }

    [v-cloak] {
      display: none;
    }
  </style>
  <body>
    <div id="app" v-cloak>
      <b-count :count="2"></b-count>
      <b-count :count="7" :min="2" :max="15"></b-count>
    </div>
    <script>
      Vue.component("b-count", {
        props: {
          count: {
            type: Number,
            default: 5,
            required: true,
          },
          min: {
            type: Number,
            default: 1,
          },
          max: {
            type: Number,
            default: 10,
          },
        },
        template: `
        <div>
        <button class="jian" @click="mycout--" :disabled="mycout===min">
          -
        </button>
        <input
          type="text"
          value="1"
          :value="mycout"
          @blur="setNum"
        />
        <button class="jia" @click="mycout++" :disabled="mycout===max">
          +
        </button> 
        </div>
        `,
        data() {
          return {
            mycout: this.count,
          };
        },
        methods: {
          setNum(e) {
            let num = e.target.value;
            if (isNaN(num)) {
              num = 1;
            } // num的类型为isNaN设置num为1
            if (num < 1) {
              num = 1;
            } // num是Number类型且小于1 设置为1
            if (num > 10) {
              num = 10;
            }
            if (!Number.isInteger(num)) {
              num = Math.floor(num);
            }
            e.target.value = count;
            this.mycout == count;
          },
        },
      });
      new Vue({
        el: "#app",
        data() {
          return {
            Number: 0,
          };
        },
      });
    </script>
  </body>
</html>
